<script setup lang="ts">
import FooterCom from './components/FooterCom.vue';
</script>
<template>
  <div class="container">
    <!-- <main class="box">
      <header class="header">头部</header>
      <div>内容</div>
    </main> -->
    <!-- 没有匹配到路由，就会导致只显示下面的footer' -->
    <!-- 找不到页面就应该配置404页面 -->
    <router-view v-slot="{ Component }">
      <transition name="fade">
        <!-- include里面存放的是 组件的name名称 数组 -->
        <keep-alive include="Home">
          <component :is="Component"> </component>
        </keep-alive>
      </transition>
    </router-view>
    <!-- <FooterCom></FooterCom> -->
     <router-view name="FooterCom"></router-view>
    <!-- 提示用户不能横屏使用 -->
    <div class="tip">
      为了更好的用户体验，请切换为竖屏使用！
    </div>
  </div>
</template>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

html,
body,
#app,
.container {
  height: 100%;
}

html {
  font-size: 26.666666vw;
}

body {
  // 具体值要根据公司设计图来决定这里应该写多少，这里的值是设计图中出现次数最多的字号
  font-size: 12px;
}

.container {
  display: flex;
  flex-direction: column;
}

.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;

  .header {
    height: 0.44rem;
    line-height: 0.44rem;
    width: 100%;
    text-align: center;
    color: white;
    background-color: #1989fa;


  }

  .content {
    flex: 1;
    overflow: auto;
    //平滑滚动
    scroll-behavior: smooth;
  }

}

footer {
  height: 0.5rem;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
  align-items: center;

  a {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-decoration: none;
    // 取消选中时的边框
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .router-link-active {
    color: #1989fa;
    // color: #f66;
  }
}

.fade-enter-active {
  transition: all 0.3s;
  opacity: 0;
  transform: translateX(100%);
}

.fade-enter-to {
  transition: all 0.3s;
  opacity: 1;
  transform: translateX(0);
}
.tip{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background-color: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 0.4rem;
  z-index: 9999999;
  display: none;
  justify-content: center;
  align-items: center;
  user-select: none;
}
//禁止横屏显示
@media (orientation: landscape) {
  .tip{
    display: flex;
  }
}
</style>